<!-- 免密登录页 -->
<template>
    <view class="uni-content">
        <view class="login-logo">
            <image :src="logo"></image>
        </view>
        <!-- 顶部文字 -->
        <text class="title">请选择登录方式</text>
        <!-- 快捷登录框 当url带参数时有效 -->
        <template v-if="['apple','weixin', 'weixinMobile'].includes(type)">
            <text class="tip">将根据第三方账号服务平台的授权范围获取你的信息</text>
            <view class="quickLogin">
                <image v-if="type !== 'weixinMobile'" @click="quickLogin" :src="imgSrc" mode="widthFix"
                    class="quickLoginBtn"></image>
                <button v-else type="primary" open-type="getPhoneNumber" @getphonenumber="quickLogin"
                    class="uni-btn">微信授权手机号登录</button>
                <uni-id-pages-agreements scope="register" ref="agreements"></uni-id-pages-agreements>
            </view>
        </template>
        <template v-else>
            <text class="tip">未注册的账号验证通过后将自动注册</text>
            <view class="phone-box">
                <!-- <view @click="chooseArea" class="area">+86</view> -->
                <view class="qh">+86</view>
                <uni-easyinput :focus="focusPhone" @blur="focusPhone = false" class="input-box" type="number"
                    :inputBorder="false" v-model="phone" maxlength="11" placeholder="请输入手机号" />
            </view>
            <uni-id-pages-agreements scope="register" ref="agreements"></uni-id-pages-agreements>
            <button class="uni-btn" type="primary" @click="toSmsPage">获取验证码</button>
        </template>
        <!-- 固定定位的快捷登录按钮 -->
        <uni-id-pages-fab-login ref="uniFabLogin"></uni-id-pages-fab-login>
    </view>
</template>

<script>
    let currentWebview; //当前窗口对象
    import config from '@/uni_modules/uni-id-pages/config.js'
    import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
    export default {
        mixins: [mixin],
        data() {
            return {
                type: "", //快捷登录方式
                phone: "", //手机号码
                focusPhone: false,
                logo: "/static/logo.png"
            }
        },
        computed: {
            async loginTypes() { //读取配置的登录优先级
                return config.loginTypes
            },
            isPhone() { //手机号码校验正则
                return /^1\d{10}$/.test(this.phone);
            },
            imgSrc() { //大快捷登录按钮图
                return this.type == 'weixin' ? '/uni_modules/uni-id-pages/static/login/weixin.png' :
                    '/uni_modules/uni-id-pages/static/app-plus/apple.png'
            }
        },
        async onLoad(e) {
            //获取通过url传递的参数type设置当前登录方式，如果没传递直接默认以配置的登录
            let type = e.type || config.loginTypes[0]
            this.type = type

            // console.log("this.type: -----------",this.type);
            if (type != 'univerify') {
                this.focusPhone = true
            }
            this.$nextTick(() => {
                //关闭重复显示的登录快捷方式
                if (['weixin', 'apple'].includes(type)) {
                    this.$refs.uniFabLogin.servicesList = this.$refs.uniFabLogin.servicesList.filter(item =>
                        item.id != type)
                }
            })
            uni.$on('uni-id-pages-setLoginType', type => {
                this.type = type
            })
        },
        onShow() {
            // #ifdef H5
            document.onkeydown = event => {
                var e = event || window.event;
                if (e && e.keyCode == 13) { //回车键的键值为13
                    this.toSmsPage()
                }
            };
            // #endif
        },
        onUnload() {
            uni.$off('uni-id-pages-setLoginType')
        },
        onReady() {
            // 是否优先启动一键登录。即：页面一加载就启动一键登录
            //#ifdef APP-PLUS
            if (config.loginTypes.includes('univerify') && this.type == "univerify") {
                uni.preLogin({
                    provider: 'univerify',
                    success: () => {
                        const pages = getCurrentPages();
                        currentWebview = pages[pages.length - 1].$getAppWebview();
                        currentWebview.setStyle({
                            "top": "2000px" // 隐藏当前页面窗体
                        })
                        // this.type == this.loginTypes[1]
                        // console.log('开始一键登录');
                        this.$refs.uniFabLogin.login_before('univerify')
                    },
                    fail: (err) => {
                        console.log(err);
                        if (config.loginTypes.length > 1) {
                            this.$refs.uniFabLogin.login_before(config.loginTypes[1])
                        } else {
                            uni.showModal({
                                content: err.message,
                                showCancel: false
                            });
                        }
                    }
                })
            }
            //#endif
        },
        methods: {
            showCurrentWebview() {
                // 恢复当前页面窗体的显示 一键登录，默认不显示当前窗口
                currentWebview.setStyle({
                    "top": 0
                })
            },
            quickLogin(e) {
                let options = {}

                if (e.detail?.code) {
                    options.phoneNumberCode = e.detail.code
                }

                if (this.type === 'weixinMobile' && !e.detail?.code) return

                this.$refs.uniFabLogin.login_before(this.type, true, options)
            },
            toSmsPage() {
                if (!this.isPhone) {
                    this.focusPhone = true
                    return uni.showToast({
                        title: "手机号码格式不正确",
                        icon: 'none',
                        duration: 3000
                    });
                }
                if (this.needAgreements && !this.agree) {
                    return this.$refs.agreements.popup(this.toSmsPage)
                }
                // 发送验证吗
                uni.navigateTo({
                    url: '/uni_modules/uni-id-pages/pages/login/login-smscode?phoneNumber=' + this.phone
                });
            },
            //去密码登录页
            toPwdLogin() {
                uni.navigateTo({
                    url: '../login/password'
                })
            },
            chooseArea() {
                uni.showToast({
                    title: '暂不支持其他国家',
                    icon: 'none',
                    duration: 3000
                });
            },
        }
    }
</script>
<style>
    page {
        background-color: #fff;
    }
</style>
<style lang="scss" scoped>
    @import "@/uni_modules/uni-id-pages/common/login-page.scss";

    @media screen and (min-width: 690px) {
        .uni-content {
            height: 350px;

        }
    }

    .uni-content,
    .quickLogin {
        /* #ifndef APP-NVUE */
        display: flex;
        flex-direction: column;
        /* #endif */
    }

    .phone-box {
        position: relative;
        /* #ifndef APP-NVUE */
        display: flex;

        /* #endif */
        .qh {
            position: absolute;
            z-index: 100;
            left: 20rpx;
            top: 25rpx;
            font-size: 28rpx;
        }
    }

    .area {
        position: absolute;
        left: 10px;
        z-index: 9;
        top: -35px;
        font-size: 14px;
    }

    .area::after {
        content: "";
        border: 3px solid transparent;
        border-top-color: #000;
        top: 12px;
        left: 3px;
        position: relative;
    }

    /* #ifdef MP */
    // 解决小程序端开启虚拟节点virtualHost引起的 class = input-box丢失的问题 [详情参考](https://uniapp.dcloud.net.cn/matter.html#%E5%90%84%E5%AE%B6%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AE%9E%E7%8E%B0%E6%9C%BA%E5%88%B6%E4%B8%8D%E5%90%8C-%E5%8F%AF%E8%83%BD%E5%AD%98%E5%9C%A8%E7%9A%84%E5%B9%B3%E5%8F%B0%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98)
    .phone-box ::v-deep .uni-easyinput__content,
    /* #endif */
    .input-box {
        /* #ifndef APP-NVUE */
        box-sizing: border-box;
        /* #endif */
        flex: 1;
        padding-left: 45px;
        margin-bottom: 10px;
        border-radius: 0;
    }

    .quickLogin {
        height: 350px;
        align-items: center;
        justify-content: center;
    }

    .quickLoginBtn {
        margin: 20px 0;
        width: 450rpx;
        /* #ifndef APP-NVUE */
        max-width: 230px;
        /* #endif */
        height: 82rpx;
    }

    .tip {
        margin-top: -15px;
        margin-bottom: 20px;
    }

    @media screen and (min-width: 690px) {
        .quickLogin {
            height: auto;
        }
    }
</style>